Lektion 7
Tabellen - Teil 2

 


  1. Abstand zwischen Zelleninhalten und Zellenrand
  2. Dicke der Gitternetzlinien
  3. Hintergrundfarbe der Tabelle
  4. Hintergrundfarbe einzelner Tabellenzellen
  5. Hintergrundbild einzelner Tabellenzellen
  6. Tabellenaußenrahmen (nur IE)
  7. Tabellenhintergrund
  8. Gitternetzlinien (nur IE)
  9. Tabellenrahmenfarbe (nur IE)
  10. Tabellenabstand zum umgebenden Text (nur Netscape)
  11. Tabellenzellen zusammenführen
  12. Praxis-Tipps zu Tabellen

    13.  

     

Vorwort:
Betrachten Sie Tabellen stets als Mittel zur Positionierung von Text und Grafik auf dem Bildschirm. Nutzen Sie die einzelnen Tabellenzellen zur Positionierung. Bei Tabellen können mit dem Attribut border=0 immer die Rahmen- und Gitternetzlinien ausgeblendet werden! Beachten Sie insbesondere die Praxis-Tipps am Ende!

Aufbauend auf der vorhergehenden Lektion werden weitere tabellenspezifische Befehle erläutert. Sie lernen die HTML-Tags und Attribute kennen, die Ihrer Tabelle das gewünschte Aussehen geben können. 
Abstand zwischen Zelleninhalten 
und Zellenrand

Mit dem Attribut cellpadding und der Wertangabe in Pixel wird der Abstand in einer Tabellenzelle zwischen dem Inhalt und dem Zellenrand eingestellt. Diese Angabe wird im einleitenden Table-Tag gemacht.

<Table cellpadding="20" border="5">
    <tr>
        <td>
        Eine Tabelle mit 20 Pixel Innenrand pro Zelle
        </td>
        <td>
        Der Tabellenrahmen ist 5 Pixel breit
        </td>
    </tr>
    <tr>
        <td>
        Eine Tabelle mit 20 Pixel Innenrand pro Zelle
        </td>
        <td>
       Der Tabellenrahmen ist 5 Pixel breit
        </td>
    </tr>
 </Table>

 
Eine Tabelle mit 20 Pixel Innenrand pro Zelle  Der Tabellenrahmen ist 5 Pixel breit 
Eine Tabelle mit 20 Pixel Innenrand pro Zelle  Der Tabellenrahmen ist 5 Pixel breit 

Zum Vergleich die gleiche Tabelle ohne cellpadding (cellpadding="0"):
 
Eine Tabelle mit 0 Pixel Innenrand pro Zelle  Der Tabellenrahmen ist 5 Pixel breit 
Eine Tabelle mit 0 Pixel Innenrand pro Zelle  Der Tabellenrahmen ist 5 Pixel breit 

 
Dicke der Gitternetzlinien

Mit dem Attribut cellspacing und der Wertangabe in Pixel wird die Dicke der Gitternetzlinien zwischen den einzelnen Reihen und Spalten verändert. Diese Angabe wird im einleitenden Table-Tag gemacht. Sie bezieht sich nicht auf den Tabellenaußenrahmen.
 

<Table cellspacing="XXX"> Wertangabe in Pixel

 

<Table cellspacing="20" border="5">
    <tr>
        <td>
        Eine Tabelle mit 20 Pixel breiten Gitternetzlinien
        </td>
        <td>
        Der Tabellenrahmen ist 5 Pixel breit
        </td>
    </tr>
    <tr>
        <td>
        Eine Tabelle mit 20 Pixel breiten Gitternetzlinien
        </td>
        <td>
       Der Tabellenrahmen ist 5 Pixel breit
        </td>
    </tr>
 </Table>

 
Eine Tabelle mit 20 Pixel breiten Gitternetzlinien  Der Tabellenrahmen ist 5 Pixel breit 
Eine Tabelle mit 20 Pixel breiten Gitternetzlinien  Der Tabellenrahmen ist 5 Pixel breit 

Zum Vergleich die gleiche Tabelle ohne cellspacing (cellspacing="0"):
 
Eine Tabelle mit 0 Pixel breiten Gitternetzlinien  Der Tabellenrahmen ist 5 Pixel breit 
Eine Tabelle mit 0 Pixel breiten Gitternetzlinien  Der Tabellenrahmen ist 5 Pixel breit 

 

 
Hintergrundfarbe der Tabelle

Die Hintergrundfarbe der Tabelle wird im einleitenden Table-Tag mit bgcolor bestimmt (engl: background-color). Die Farbauswahl erfolgt über den hexadezimalen Farbwert oder den Farbnamen.
 

<Table bgcolor="blue">
    <tr>
        <td>
        eine Tabelle mit blauem Hintergrund
        </td>
        <td>
        Eine Tabelle mit blauem Hintergrund
        </td>
    </tr>
    <tr>
        <td>
        Eine Tabelle mit blauem Hintergrund
        </td>
        <td>
        Eine Tabelle mit blauem Hintergrund
        </td>
    </tr>
 </Table>

 
Eine Tabelle mit blauem Hintergrund  Eine Tabelle mit blauem Hintergrund 
Eine Tabelle mit blauem Hintergrund Eine Tabelle mit blauem Hintergrund 

Wertangabe über hexadezimalen Farbwert:
 

<Table bgcolor="#FFCCCC">
    <tr>
        <td>
        Eine Tabelle mit pink/rosa Hintergrund
        </td>
        <td>
        Eine Tabelle mit pink/rosa Hintergrund
        </td>
    </tr>
    <tr>
        <td>
        Eine Tabelle mit pink/rosa Hintergrund
        </td>
        <td>
        Eine Tabelle mit pink/rosa Hintergrund
        </td>
    </tr>
 </Table>

 
Eine Tabelle mit pink/rosa Hintergrund  Eine Tabelle mit pink/rosa Hintergrund 
Eine Tabelle mit pink/rosa Hintergrund Eine Tabelle mit pink/rosa Hintergrund 

 
Hintergrundfarbe einzelner Tabellenzellen

Die Hintergrundfarbe einzelner Tabellenzellen wird im jeweiligen td-Tag mit bgcolor bestimmt. Die Farbauswahl erfolgt über den hexadezimalen Farbwert oder den Farbnamen.
<td bgcolor="#******">
<td bgcolor="Farbname">
 

<Table>
    <tr>
        <td bgcolor="#FFCCCC">
        Zelle mit pink/rosa Hintergrund
        </td>
        <td bgcolor="green">
        Zelle mit grünem Hintergrund
        </td>
    </tr>
    <tr>
        <td bgcolor="red">
        Zelle mit rotem Hintergrund
        </td>
        <td bgcolor="#0000FF">
        Zelle mit blauem Hintergrund
        </td>
    </tr>
 </Table>

 
Zelle mit pink/rosa Hintergrund  Zelle mit grünem Hintergrund 
Zelle mit rotem Hintergrund  Zelle mit blauem Hintergrund 

 
Hintergrundbild einzelner Tabellenzellen

Für einzelne Tabellenzellen können auch Hintergrundbilder eingefügt werden. Das attribut background muss in der entsprechenden Zelle mit angegeben werden.
 

<Table>
    <tr>
       <td>
       Die Zelle rechts hat eine Grafik als Hintergrund
       </td>
       <td background="158.jpg">&nbsp;
       </td>
    </tr>
</Table>

 
Die Zelle rechts hat eine Grafik als Hintergrund  

Damit die Hintergrundgrafik auch tatsächlich sichtbar wird, darf der Zelleninhalt nicht leer sein. Fügen Sie das geschützte Leerzeichen ein: &nbsp;

 
Tabellenaußenrahmen
nur Internet Explorer

Achtung:
Der nachfolgende Befehl wird nicht von Netscape interpretiert!

Sie haben die Möglichkeit, nur Teile des Tabellenaußenrahmens darzustellen. Alle Angaben werden im einleitenden table-Tag gemacht.
Mit <Table border frame="void"> erreichen Sie, dass kein Außenrahmen, aber die Gitternetzlinien in der Tabelle gezeichnet werden.

Mögliche Werte für frame sind
Frame=void (kein Aussenrahmen)
Frame=box (Rechteck)
Frame=above (nur obere Randlinie der Tabelle)
Frame=below (nur untere Randlinie der Tabelle)
Frame=lhs (nur die linke Randlinie, lhs = left hand side)
Frame=rhs (nur die rechte Randlinie, rhs = right hand side)
Frame=vsides (nur die beiden vertikalen äußeren Randlinien)
Frame=hsides (nur die beiden horizontalen Randlinien)
 

Beispiel:
 

<Table border frame="hsides">
    <tr>
        <td>
        Eine Tabelle mit horizontalen Randlinien
        </td>
        <td>
        Eine Tabelle mit horizontalen Randlinien
        </td>
    </tr>
    <tr>
        <td>
        Eine Tabelle ohne vertikale Randlinien
        </td>
        <td>
        nur im Internet Explorer
        </td>
    </tr>
 </Table>

 
Eine Tabelle mit horizontalen Randlinien  Eine Tabelle mit horizontalen Randlinien 
Eine Tabelle ohne vertikale Randlinien  nur im Internet Explorer 

 
Tabellenhintergrund

Ein Hintergrundbild kann grundsätzlich mit <table background="datei.jpg"> eingebunden werden.

Achtung:
Netscape legt hinter jede Tabellenzelle das Hintergrundbild, wobei der Internet Explorer die Grafik hinter die ganze Tabelle legt. Dies kann zu merkwürdigen Erscheinungsbildern führen!
 
 
Gitternetzlinien
nur Internetexplorer

Achtung:
Der nachfolgende Befehl wird nicht von Netscape interpretiert!

<Table rules="XXX">
Mögliche Werte für rules sind:
Rules=none (überhaupt keine Gitternetzlinien)
Rules=all (Voreinstellung, zeichnet alle)
Rules=rows (nur die waagrechten Linien)
Rules=cols (nur die senkrechten Linien)

 
Tabellenrahmenfarbe
nur Internetexplorer

<table bordercolor="#******">
<table bordercolor="Farbname">

Dieser Befehl wird nur vom Interner Explorer unterstützt.

Die Farbauswahl erfolgt über den hexadezimalen Farbwert oder den Farbnamen.
 
Tabellenabstand zum umgebenden Text
nur Netscape

Horizontaler Abstand
<table hspace="XXX"> Wertangabe in Pixel
Vertikaler Abstand
<table vspace="XXX"> Wertangabe in Pixel

Diese beiden Befehle definieren den Abstand der Tabelle zum umfließenden Text. Das klappt nur bei Netscape!

 
Tabellenzellen zusammenführen

Sie können mehrere Zellen einer Reihe zusammenführen. Angenommen, Sie haben eine Tabelle mit drei Zellen je Reihe. Sie wollen, wie im folgenden Beispiel, jetzt Text über alle drei Zellen hinweg schreiben. 
 
 
Drei Zellen übergreifender Text
1.Zelle 2.Zelle 3.Zelle

Um mehrere nebeneinander liegende Zellen zu verbinden, fügen Sie in der Zelle, ab der Sie zusammenfassen wollen, das Attribut colspan="Wert" ein. Als Wert geben Sie die Anzahl Zellen ein, die zusammengeführt werden soll. Der Quelltext für obiges Beispiel lautet:
 

<Table>
    <tr>
        <td colspan="3">
        Drei Zellen übergreifender Text
        </td>
    </tr>
    <tr>
        <td>
        1.Zelle
        </td>
        <td>
        2.Zelle
        </td>
        <td>
        3.Zelle
        </td>
    </tr>
 </Table>

In der ersten Reihe gibt es insgesamt nur eine Zelle, da ja drei Zellen zusammengefasst wurden. In der zweiten Reihe sind jedoch alle drei Zellen vorhanden. 

Sie können auch Zellen miteinander verbinden, die übereinander stehen: Zellen senkrecht zusammenführen. Dies erfolgt mit dem Tag rowspan (reihenübergreifend). Angenommen, Sie wollen drei Grafiken positionieren. Die erste Grafik wird links positioniert und die beiden weiteren Grafiken übereinander rechts neben der ersten.

 

<Table>
    <tr>
        <td rowspan="2">
        <img src="linkes BILD ......>
        </td>
        <td>
        <img src="BILD rechts oben ....>
        </td>
    </tr>
    <tr>
         <td>
         <img src="BILD rechts unten......>
        </td>
    </tr>
 </Table>

Beachten Sie: Auch hier müssen Sie in der zweiten Reihe nur noch den Inhalt der zweiten Zelle angeben. Die erste Zelle existiert in der zweiten Reihe eigentlich nicht mehr, da sie ja mit der ersten Zelle der ersten Reihe verbunden ist.
 
Praxis-Tipps zu Tabellen

Sie haben verschiedene Textabsätze, die durch verschieden große Abstände getrennt werden sollen. Erzeugen Sie eine Tabelle mit mehreren Reihen, aber jeweils nur einer Zelle pro Reihe. Um die Abstände zwischen den Absätzen zu verändern, befindet sich jeweils eine Tabellenreihe ohne Text zwischen den Absätzen.
 

<Table border="0">
    <tr>
         <td>
        Text des ersten Absatzes. Text des ersten Absatzes. Text des 
         ersten Absatzes. Text des ersten Absatzes. Text des ersten
         Absatzes. 
         </td>
    </tr>
    <tr>
         <td height="50">
         &nbsp;
         </td>
    </tr>
    <tr>
         <td>
         Text des zweiten Absatzes. Text des zweiten Absatzes. Text
         des zweiten Absatzes. Text des zweiten Absatzes. Text des 
         zweiten Absatzes. 
         </td>
    </tr>
    <tr>
         <td height="150">
         &nbsp;
         </td>
    </tr>
    <tr>
         <td>
         Text des dritten Absatzes. Text des dritten Absatzes. Text
         des dritten Absatzes. Text des dritten Absatzes. Text des 
         dritten Absatzes. 
         </td>
    </tr>
 </Table>

 
 
Sie können jeden Absatz mit einer anderen Hintergrundfarbe belegen. Geben Sie in der jeweiligen Zelle eine bgcolor an, und der Absatzhintergrund wird bunt: <td bgcolor="#Farbwert">. Wenn Ihnen der Rahmen zu eng oder zu weit erscheint, spielen Sie mit den Attributen cellspacing und cellpadding, um die Rahmen und Abstände zu verändern: <table border="0" cellpadding="Wert" cellspacing="Wert">. Der Abstand zum nächsten Absatz beträgt 50 Pixel.
 
Diese Tabelle ist BLIND: Der Tabellenrahmen ist Null: border=0. Diese Tabelle ist BLIND: Der Tabellenrahmen ist Null: border=0. Diese Tabelle ist BLIND: Der Tabellenrahmen ist Null: border=0. Der Abstand zum nächsten Absatz beträgt 150 Pixel. Der Abstand zum nächsten Absatz beträgt 150 Pixel. Der Abstand zum nächsten Absatz beträgt 150 Pixel.
 
Damit diese Methode funktioniert, dürfen die "leeren Zellen" nicht leer sein! Fügen Sie ein geschütztes Leerzeichen ein: &nbsp; Damit diese Methode funktioniert dürfen die "leeren Zellen" nicht leer sein! Fügen Sie ein geschütztes Leerzeichen ein: &nbsp; Damit diese Methode funktioniert dürfen die "leeren Zellen" nicht leer sein! Fügen Sie ein geschütztes Leerzeichen ein: &nbsp;

Beachten Sie, dass der Tabellenrand auf Null gesetzt wird (border="0"), um die Trennlinien verschwinden zu lassen. 
 
Mehrspaltiger Text:
Mit einer Tabelle bestehend aus einer Reihe mit drei Zellen kann dreispaltiger Text aufgebaut werden. Setzen Sie in den einzelnen Zellen valign="top", damit der Text auch oben bündig erscheint. Die Breite der einzelnen Zellen werden über width="Wert" gesteuert. Erlaubt sind Wertangaben in Prozent oder Pixel.  Um die Abstände zwischen den Spalten zu variieren, setzen Sie die Tags cellspacing und cellpadding ein. Soll der Text vertikal zentriert erscheinen, müssen Sie valign="middle" setzen. Vergessen Sie nicht, den Tabellenrand auf Null zu setzen, um die Gitternetzlinien und Außenlinien zu unterdrücken. Die erste und dritte Zelle haben einen farbigen Hintergrund: <td bgcolor="#Wert">.

Aufgabe:
Bauen Sie mit einer Tabelle eine senkrechte Navigationsleiste (Menue) mit fünf Elementen auf. Benutzen Sie hierfür eine Tabelle mit fünf Reihen und jeweils nur einer Tabellen-Zelle je Reihe. Geben Sie der Tabelle eine Hintergrundfarbe. Setzen Sie jeden Navigations- oder Menue-Punkt in eine eigene Tabellen-Zelle. Formatiernen Sie die Abstände mit cellpadding und cellspacing.

Aufgabe:
Bild mit Bildbeschreibung und Bildunterschrift.
Setzen Sie eine Grafik in eine Zelle einer Tabelle. Setzen Sie rechts neben die Grafik einen beschreibenden Text zur Grafik. Wählen Sie einen Namen für die Grafik, und setzen Sie den Namen als Bildunterschrift unter die Grafik. Setzen Sie die Grafik, Beschreibung und Bildunterschrift jeweils in eine eigene Tabellenzelle. Verwenden Sie für Ihre Tabellenzellen Farben, und formatieren Sie die Tabelleninhalte mit cellpadding, cellspacing sowie border.

vorige Lektion
nächste Lektion
Inhaltsverzeichnis nach oben

Hinweis
Falls Sie Hinweise, Kritik, Anregungen oder sonstige Kommentare zu dieser oder anderen Lektionen/zum Kurs haben, schicken Sie mir bitte eine Mail.

Sollten Sie länger als 30 Minuten an einem Problem brüten, schicken Sie mir bitte eine Mail.
 

 © Copyright Dr. Horst Jaitner.  Dieser Text ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Bilder ohne Genehmigung , auch auszugsweise, ist strafbar. Das gilt auch für die Verwendung in Kursunterlagen, Vervielfältigung oder Verwendung in elektronischen Systemen.